<template>
  <div class="login-view" :plain="true">
    <div class="login_form_login">
      <div class="title">
        <img src="@/assets/img/z-mall-logo@2x.png" alt="" />
        <p>ZMALL商城管理系统</p>
      </div>
      <el-form :rules="rules" :model="form" ref="form">
        <el-form-item prop="username">
          <el-input
            clearable
            v-model="form.username"
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            show-password
            v-model="form.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>
        <router-link to="/register" style="float: right"
          >注册新用户
        </router-link>
        <div>
          <el-button
            :loading="loading"
            type="primary"
            style="width: 100%; margin-top: 20px"
            @click="handleLogin"
            >登录</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
// import { login } from "@/api";
import { set, get, remove } from "@/utils/store";
const Base64 = require("js-base64").Base64;
import ls from "@/store/index";
export default {
  name: "LoginView",
  data() {
    return {
      loading: false,
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 3,
            max: 8,
            message: "长度在 3 到 8 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "change",
          },
          {
            pattern:
              /^(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^*()]{6,20}$/,
            message: "至少包含数字跟字母可以有特殊字母(6-20)",
            trigger: "blur",
          },
        ],
      },
      checked: false,
    };
  },
  mounted() {
    let username = get("username");
    if (username) {
      this.form.username = get("username");
      this.form.password = Base64.decode(get("password"));
      this.checked = true;
    }
  },
  computed: {
    ...mapState("user", ["userinfo"]),
    // ...mapState("user", ["editPassword"]),
  },
  created() {
    if (!this.userinfo.password) {
      this.getUser();
    }
  },
  methods: {
    ...mapActions("user", ["login"]),
    ...mapActions("user", ["getUser"]),
    async handleLogin() {
      try {
        await this.login(this.form);
        this.$router.push("/");
        this.$message({
          message: "登录成功",
          type: "success",
        });
        this.loading = true;
      } catch (err) {
        this.loading = false;
        this.$message.error("登录失败");
      }

      //尝试判断密码账号是否错误
      // try {
      // let { data } = await login({
      //   username: this.form.username,
      //   password: this.form.password,
      // });
      // console.log(this.username);
      // set("token", data.token);
      // this.$router.push("/home");
      // this.$message({
      //   message: "登录成功",
      //   type: "success",
      // });
      // } catch (err) {
      //   this.loading = false;
      //   this.$message.error("登录失败");
      // }
      this.$refs.form.validate((isOk) => {
        console.log(ls);
        if (isOk) {
          this.flag = true;
          //账号密码存储
          if (this.checked) {
            let password = Base64.encode(this.form.password); //base64加密
            set("username", this.form.username);
            set("password", password);
          } else {
            remove("username");
            remove("password");
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login-view {
  width: 100vw;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url("~@/assets/img/login-bg.png");
  .login_form_login {
    width: 400px;
    height: 380px;
    background-color: rgba($color: #fff, $alpha: 0.4);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .title {
      padding-top: 25px;
      vertical-align: middle;
      display: flex;
      margin-left: 20%;
      > img {
        vertical-align: middle;
        margin-right: 5px;
        width: 50px;
        height: 50px;
      }
      > p {
        font-size: 20px;
        color: white;
        font-family: "微软雅黑";
      }
    }
  }
}
.el-form {
  padding: 20px;
}
.el-form-item {
  margin-top: 20px;
}
.el-checkbox,
a {
  margin-top: 20px;
}
</style>
